<template>
	<uni-forms ref="form" :model="formData" :rules="rules">
		<!-- 图片上传字段（点击后立即上传） -->
		<uni-forms-item label="照片1" name="photo1">
			<uni-file-picker v-model="formData.photo1" fileMediatype="image" limit="1" :auto-upload="false"
				@select="onFileSelectAndUpload('photo1', $event)" @delete="onFileDelete('photo1')" />
			<text v-if="uploadStatus.photo1 === 'uploading'" class="upload-status">上传中...</text>
			<text v-if="uploadStatus.photo1 === 'success'" class="upload-status success">✓ 上传成功</text>
			<text v-if="uploadStatus.photo1 === 'error'" class="upload-status error">上传失败，请重试</text>
		</uni-forms-item>

		<!-- 提交按钮（仅提交表单数据，文件已提前上传） -->
		<button @click="submitForm">提交表单</button>
	</uni-forms>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					photo1: [], // 存储已上传的文件信息（含服务器URL）
				},
				rules: {
					photo1: {
						rules: [{
							required: true,
							errorMessage: '请上传照片1'
						}]
					}
				},
				uploadStatus: {
					photo1: '' // uploading | success | error
				}
			};
		},
		methods: {
			// 选择文件后立即上传
			async onFileSelectAndUpload(fieldName, {
				tempFiles
			}) {
				if (!tempFiles || tempFiles.length === 0) return;

				const file = tempFiles[0];
				this.uploadStatus[fieldName] = 'uploading';

				try {
					// 1. 上传文件到服务器
					const serverUrl = await this.uploadFile(file);

					// 2. 更新表单数据（替换为服务器URL）
					this.formData[fieldName] = [{
						name: file.name,
						url: serverUrl, // 服务器返回的地址
						extname: file.extname,
						size: file.size
					}];

					this.uploadStatus[fieldName] = 'success';
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					});

				} catch (err) {
					console.error('上传失败:', err);
					this.uploadStatus[fieldName] = 'error';
					this.formData[fieldName] = []; // 清空失败的文件
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					});
				}
			},

			// 文件删除回调
			onFileDelete(fieldName) {
				this.formData[fieldName] = [];
				this.uploadStatus[fieldName] = '';
			},

			// 上传文件到服务器（实际接口调用）
			uploadFile(file) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'https://your-api.com/upload', // 替换为你的上传接口
						filePath: file.path,
						name: 'file', // 后端接收的字段名
						formData: {
							userId: '123'
						}, // 附加参数
						success: (res) => {
							const data = JSON.parse(res.data); // 假设接口返回JSON
							resolve(data.url); // 返回服务器文件地址
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			},

			// 提交表单（仅需验证，文件已提前上传）
			async submitForm() {
				try {
					await this.$refs.form.validate();
					console.log('最终提交数据:', this.formData); // 此时formData中的url已是服务器地址
					uni.showToast({
						title: '提交成功'
					});
				} catch (err) {
					uni.showToast({
						title: err.message || '请检查表单',
						icon: 'none'
					});
				}
			}
		}
	};
</script>